<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 引入 cdn 的 ECharts 文件 -->
  <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
  <title>test</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1920px;height:800px;"></div>

<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'))

  var upColor = '#ec0000'
  var upBorderColor = '#8A0000'
  var downColor = '#00da3c'
  var downBorderColor = '#008F28'

  /*时间的格式化: 把GMT时间格式化成2018-12-24 16:01:00*/
  function formatTime(date) {
    // console.log(date)
    var Y = date.getFullYear() + '/'
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/'
    var D = date.getDate()
    if (D < 10) {
      D = '0' + D + ' '
    } else {
      D = D + ' '
    }
    var h = date.getHours()
    if (h < 10) {
      h = '0' + h
    } else {
      h = h + ":"
    }
    if (h < 10) h = '0' + h
    var m = date.getMinutes()
    if (m < 10) {
      m = '0' + m
    } else {
      m = m + ":"
    }
    var s = date.getSeconds()
    if (s < 10) s = '0' + s
    return Y + M + D + h + m + s
    // console.log(Y + M + D + h + m + s)
    // 输出结果：2018-12-24 16:01:00
  }

  // console.log('Mon Dec 24 2018 16:1:39 GMT+0800 (中国标准时间)')

  // 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
  var data0 = splitData([
    // Date.now()是获取当前时间的总毫秒数
    // Date.now() - 97000是把时间推前97秒
    // new Date(Date.now() - 97000)是GMT格式时间(Mon Dec 24 2018 15:50:40 GMT+0800 (中国标准时间))
    [formatTime(new Date(Date.now() - 97000)), 2320.26, 2320.26, 2287.3, 2362.94], // 改时间
    [formatTime(new Date(Date.now() - 96000)), 2300, 2291.3, 2288.26, 2308.38],
    [formatTime(new Date(Date.now() - 95000)), 2295.35, 2346.5, 2295.35, 2346.92],
    [formatTime(new Date(Date.now() - 94000)), 2347.22, 2358.98, 2337.35, 2363.8],
    [formatTime(new Date(Date.now() - 93000)), 2360.75, 2382.48, 2347.89, 2383.76],
    [formatTime(new Date(Date.now() - 92000)), 2383.43, 2385.42, 2371.23, 2391.82],
    [formatTime(new Date(Date.now() - 91000)), 2377.41, 2419.02, 2369.57, 2421.15],
    [formatTime(new Date(Date.now() - 90000)), 2425.92, 2428.15, 2417.58, 2440.38],
    [formatTime(new Date(Date.now() - 89000)), 2411, 2433.13, 2403.3, 2437.42],
    [formatTime(new Date(Date.now() - 88000)), 2432.68, 2434.48, 2427.7, 2441.73],
    [formatTime(new Date(Date.now() - 87000)), 2430.69, 2418.53, 2394.22, 2433.89],
    [formatTime(new Date(Date.now() - 86000)), 2416.62, 2432.4, 2414.4, 2443.03],
    [formatTime(new Date(Date.now() - 85000)), 2441.91, 2421.56, 2415.43, 2444.8],
    [formatTime(new Date(Date.now() - 84000)), 2420.26, 2382.91, 2373.53, 2427.07],
    [formatTime(new Date(Date.now() - 83000)), 2383.49, 2397.18, 2370.61, 2397.94],
    [formatTime(new Date(Date.now() - 82000)), 2378.82, 2325.95, 2309.17, 2378.82],
    [formatTime(new Date(Date.now() - 81000)), 2322.94, 2314.16, 2308.76, 2330.88],
    [formatTime(new Date(Date.now() - 80000)), 2320.62, 2325.82, 2315.01, 2338.78],
    [formatTime(new Date(Date.now() - 70000)), 2313.74, 2293.34, 2289.89, 2340.71],
    [formatTime(new Date(Date.now() - 69000)), 2297.77, 2313.22, 2292.03, 2324.63],
    [formatTime(new Date(Date.now() - 68000)), 2322.32, 2365.59, 2308.92, 2366.16],
    [formatTime(new Date(Date.now() - 67000)), 2364.54, 2359.51, 2330.86, 2369.65],
    [formatTime(new Date(Date.now() - 66000)), 2332.08, 2273.4, 2259.25, 2333.54],
    [formatTime(new Date(Date.now() - 65000)), 2274.81, 2326.31, 2270.1, 2328.14],
    [formatTime(new Date(Date.now() - 64000)), 2333.61, 2347.18, 2321.6, 2351.44],
    [formatTime(new Date(Date.now() - 63000)), 2340.44, 2324.29, 2304.27, 2352.02],
    [formatTime(new Date(Date.now() - 62000)), 2326.42, 2318.61, 2314.59, 2333.67],
    [formatTime(new Date(Date.now() - 61000)), 2314.68, 2310.59, 2296.58, 2320.96],
    [formatTime(new Date(Date.now() - 60000)), 2309.16, 2286.6, 2264.83, 2333.29],
    [formatTime(new Date(Date.now() - 59000)), 2282.17, 2263.97, 2253.25, 2286.33],
    [formatTime(new Date(Date.now() - 58000)), 2255.77, 2270.28, 2253.31, 2276.22],
    [formatTime(new Date(Date.now() - 57000)), 2269.31, 2278.4, 2250, 2312.08],
    [formatTime(new Date(Date.now() - 56000)), 2267.29, 2240.02, 2239.21, 2276.05],
    [formatTime(new Date(Date.now() - 55000)), 2244.26, 2257.43, 2232.02, 2261.31],
    [formatTime(new Date(Date.now() - 54000)), 2257.74, 2317.37, 2257.42, 2317.86],
    [formatTime(new Date(Date.now() - 53000)), 2318.21, 2324.24, 2311.6, 2330.81],
    [formatTime(new Date(Date.now() - 52000)), 2321.4, 2328.28, 2314.97, 2332],
    [formatTime(new Date(Date.now() - 51000)), 2334.74, 2326.72, 2319.91, 2344.89],
    [formatTime(new Date(Date.now() - 50000)), 2318.58, 2297.67, 2281.12, 2319.99],
    [formatTime(new Date(Date.now() - 49000)), 2299.38, 2301.26, 2289, 2323.48],
    [formatTime(new Date(Date.now() - 48000)), 2273.55, 2236.3, 2232.91, 2273.55],
    [formatTime(new Date(Date.now() - 47000)), 2238.49, 2236.62, 2228.81, 2246.87],
    [formatTime(new Date(Date.now() - 46000)), 2229.46, 2234.4, 2227.31, 2243.95],
    [formatTime(new Date(Date.now() - 45000)), 2234.9, 2227.74, 2220.44, 2253.42],
    [formatTime(new Date(Date.now() - 44000)), 2232.69, 2225.29, 2217.25, 2241.34],
    [formatTime(new Date(Date.now() - 43000)), 2196.24, 2211.59, 2180.67, 2212.59],
    [formatTime(new Date(Date.now() - 42000)), 2215.47, 2225.77, 2215.47, 2234.73],
    [formatTime(new Date(Date.now() - 41000)), 2224.93, 2226.13, 2212.56, 2233.04],
    [formatTime(new Date(Date.now() - 40000)), 2236.98, 2219.55, 2217.26, 2242.48],
    [formatTime(new Date(Date.now() - 39000)), 2218.09, 2206.78, 2204.44, 2226.26],
    [formatTime(new Date(Date.now() - 38000)), 2199.91, 2181.94, 2177.39, 2204.99],
    [formatTime(new Date(Date.now() - 37000)), 2169.63, 2194.85, 2165.78, 2196.43],
    [formatTime(new Date(Date.now() - 36000)), 2195.03, 2193.8, 2178.47, 2197.51],
    [formatTime(new Date(Date.now() - 35000)), 2181.82, 2197.6, 2175.44, 2206.03],
    [formatTime(new Date(Date.now() - 34000)), 2201.12, 2244.64, 2200.58, 2250.11],
    [formatTime(new Date(Date.now() - 33000)), 2236.4, 2242.17, 2232.26, 2245.12],
    [formatTime(new Date(Date.now() - 32000)), 2242.62, 2184.54, 2182.81, 2242.62],
    [formatTime(new Date(Date.now() - 31000)), 2187.35, 2218.32, 2184.11, 2226.12],
    [formatTime(new Date(Date.now() - 30000)), 2213.19, 2199.31, 2191.85, 2224.63],
    [formatTime(new Date(Date.now() - 29000)), 2203.89, 2177.91, 2173.86, 2210.58],
    [formatTime(new Date(Date.now() - 28000)), 2170.78, 2174.12, 2161.14, 2179.65],
    [formatTime(new Date(Date.now() - 27000)), 2179.05, 2205.5, 2179.05, 2222.81],
    [formatTime(new Date(Date.now() - 26000)), 2212.5, 2231.17, 2212.5, 2236.07],
    [formatTime(new Date(Date.now() - 25000)), 2227.86, 2235.57, 2219.44, 2240.26],
    [formatTime(new Date(Date.now() - 24000)), 2242.39, 2246.3, 2235.42, 2255.21],
    [formatTime(new Date(Date.now() - 23000)), 2246.96, 2232.97, 2221.38, 2247.86],
    [formatTime(new Date(Date.now() - 22000)), 2228.82, 2246.83, 2225.81, 2247.67],
    [formatTime(new Date(Date.now() - 21000)), 2247.68, 2241.92, 2231.36, 2250.85],
    [formatTime(new Date(Date.now() - 20000)), 2238.9, 2217.01, 2205.87, 2239.93],
    [formatTime(new Date(Date.now() - 19000)), 2217.09, 2224.8, 2213.58, 2225.19],
    [formatTime(new Date(Date.now() - 18000)), 2221.34, 2251.81, 2210.77, 2252.87],
    [formatTime(new Date(Date.now() - 17000)), 2249.81, 2282.87, 2248.41, 2288.09],
    [formatTime(new Date(Date.now() - 16000)), 2286.33, 2299.99, 2281.9, 2309.39],
    [formatTime(new Date(Date.now() - 15000)), 2297.11, 2305.11, 2290.12, 2305.3],
    [formatTime(new Date(Date.now() - 14000)), 2303.75, 2302.4, 2292.43, 2314.18],
    [formatTime(new Date(Date.now() - 13000)), 2293.81, 2275.67, 2274.1, 2304.95],
    [formatTime(new Date(Date.now() - 12000)), 2281.45, 2288.53, 2270.25, 2292.59],
    [formatTime(new Date(Date.now() - 11000)), 2286.66, 2293.08, 2283.94, 2301.7],
    [formatTime(new Date(Date.now() - 10000)), 2293.4, 2321.32, 2281.47, 2322.1],
    [formatTime(new Date(Date.now() - 9000)), 2323.54, 2324.02, 2321.17, 2334.33],
    [formatTime(new Date(Date.now() - 8000)), 2316.25, 2317.75, 2310.49, 2325.72],
    [formatTime(new Date(Date.now() - 7000)), 2320.74, 2300.59, 2299.37, 2325.53],
    [formatTime(new Date(Date.now() - 6000)), 2300.21, 2299.25, 2294.11, 2313.43],
    [formatTime(new Date(Date.now() - 5000)), 2297.1, 2272.42, 2264.76, 2297.1],
    [formatTime(new Date(Date.now() - 4000)), 2270.71, 2270.93, 2260.87, 2276.86],
    [formatTime(new Date(Date.now() - 3000)), 2264.43, 2242.11, 2240.07, 2266.69],
    [formatTime(new Date(Date.now() - 2000)), 2242.26, 2210.9, 2205.07, 2250.63],
    [formatTime(new Date(Date.now() - 1000)), 2190.1, 2148.35, 2126.22, 2190.1]
  ])

  function splitData(rawData) {
    var categoryData = []
    var values = []
    for (var i = 0; i < rawData.length; i++) {
      categoryData.push(rawData[i].splice(0, 1)[0])
      values.push(rawData[i])
    }
    return {
      categoryData: categoryData,
      values: values
    }
  }

  function calculateMA(dayCount) {
    var result = []
    for (var i = 0, len = data0.values.length; i < len; i++) {
      if (i < dayCount) {
        // console.log("------------")
        result.push('-')
        continue
      }
      var sum = 0
      for (var j = 0; j < dayCount; j++) {
        sum += data0.values[i - j][1]
      }
      result.push(sum / dayCount)
    }
    return result
  }

  // 指定图表的配置项和数据
  var option = {
    backgroundColor: '#21202D',
    title: {
      text: '上证指数',
      left: 0
    },
    tooltip: { // 提示文本
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: { // 图例组件
      data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
    },
    grid: { // 直角坐标系内绘图网格
      left: '10%',
      right: '10%',
      bottom: '15%'
    },
    xAxis: { // x轴
      type: 'category',
      data: data0.categoryData,
      scale: true,
      boundaryGap: false,
      // axisLine: {onZero: false},
      splitLine: {show: false}, // 是否显示竖线

      splitNumber: 5, // 横坐标刻度的间隔 默认是最后一位数的 default: 5

      min: 'dataMin',
      max: 'dataMax',

      axisLine: {lineStyle: {color: '#8392A5'}}
    },
    yAxis: { // y轴
      scale: true,
      splitArea: {
        show: true
      },

      splitLine: {show: false}, // 是否显示横线

      axisLine: {lineStyle: {color: '#8392A5'}}
    },
    dataZoom: [ // dataZoom 组件 用于区域缩放
      {
        type: 'inside',
        start: 50,
        end: 100
      },
      {
        show: true,
        type: 'slider',
        y: '90%',
        start: 50,
        end: 100
      }
    ],
    series: [ // 系列列表。每个系列通过 type 决定自己的图表类型
      {
        name: '日K',
        type: 'candlestick', // K线图
        data: data0.values,
        itemStyle: {
          normal: {
            color: upColor,
            color0: downColor,
            borderColor: upBorderColor,
            borderColor0: downBorderColor
          }
        },
        markPoint: {
          label: {
            normal: {
              formatter: function (param) {
                return param != null ? Math.round(param.value) : ''
              }
            }
          },
          data: [
            {
              name: 'XX标点',
              coord: ['2013/5/31', 2300],
              value: 2300,
              itemStyle: {
                normal: {color: 'rgb(41,60,85)'}
              }
            },
            {
              name: 'highest value',
              type: 'max',
              valueDim: 'highest'
            },
            {
              name: 'lowest value',
              type: 'min',
              valueDim: 'lowest'
            },
            {
              name: 'average value on close',
              type: 'average',
              valueDim: 'close'
            }
          ],
          tooltip: {
            formatter: function (param) {
              return param.name + '<br>' + (param.data.coord || '')
            }
          }
        },
        markLine: {
          symbol: ['none', 'none'],
          data: [
            [
              {
                name: 'from lowest to highest',
                type: 'min',
                valueDim: 'lowest',
                symbol: 'circle',
                symbolSize: 10,
                label: {
                  normal: {show: false},
                  emphasis: {show: false}
                }
              },
              {
                type: 'max',
                valueDim: 'highest',
                symbol: 'circle',
                symbolSize: 10,
                label: {
                  normal: {show: false},
                  emphasis: {show: false}
                }
              }
            ],
            {
              name: 'min line on close',
              type: 'min',
              valueDim: 'close'
            },
            {
              name: 'max line on close',
              type: 'max',
              valueDim: 'close'
            }
          ]
        }
      },
      {
        name: 'MA5',
        type: 'line',
        data: calculateMA(5),
        smooth: true,
        lineStyle: {
          normal: {opacity: 0.5}
        }
      },
      {
        name: 'MA10',
        type: 'line',
        data: calculateMA(10),
        smooth: true,
        lineStyle: {
          normal: {opacity: 0.5}
        }
      },
      {
        name: 'MA20',
        type: 'line',
        data: calculateMA(20),
        smooth: true,
        lineStyle: {
          normal: {opacity: 0.5}
        }
      },
      {
        name: 'MA30',
        type: 'line',
        data: calculateMA(30),
        smooth: true,
        lineStyle: {
          normal: {opacity: 0.5}
        }
      },

    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
</script>
</body>
</html>